<template>
  <div class="skill_group">
    <div class="header">
      <!--<span class="iconfont icon-zhankai"-->
            <!--@click="edit(-1)"><span>添加</span></span>-->
      <el-button class="iconfont icon-shuaxin"
                 :loading="refreshLoading"
                 @click="refresh"><span>刷新</span></el-button>
      <!--<el-input-->
        <!--class = "fr"-->
        <!--placeholder="请输入内容"-->
        <!--size="mini"-->
        <!--@keyup.enter.native = "searchName"-->
        <!--v-model="name">-->
        <!--<i-->
          <!--class="el-input__icon el-icon-search"-->
          <!--slot="suffix"-->
          <!--@click="searchName">-->
        <!--</i>-->
      <!--</el-input>-->
      <div class="pagina fr">
        <pagination
          small=""
          :currentPage="currentPage"
          :count="count"
          @turnPage="turnPage"
          :totalPage="totalPage"></pagination></div>
    </div>
    <el-table :data="tableData"
              border
              v-loading = "tableLoading"
              size="mini"
              style="width: 100%">
      <el-table-column
        prop="name"
        label="网站名称"></el-table-column>
      <el-table-column
        prop="updateTime"
        label="最后更新时间"></el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button type="text"
                     size="small"
                     @click="edit(scope.$index, tableData)">修改</el-button>
          <!--<el-button type="text"-->
                     <!--size="small"-->
                     <!--@click="accessCode(scope.row.webchatUrl,tableData[scope.$index].accessId, tableData[scope.$index].name)">接入代码</el-button>-->
          <el-button type="text"
                     size="small"
                     @click="testFun(scope.$index, tableData)">测试</el-button>
            <!-- <a :href="scope.row.webchatUrl + '/?' + scope.row.accessId"
               target="_blank">测试</a></el-button> -->
          <!--<el-button type="text"-->
                     <!--size="small"-->
                     <!--@click="dele(tableData[scope.$index]._id, tableData[scope.$index].name)">删除</el-button>-->
        </template></el-table-column></el-table>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        name: '',
        tableData: [],
        refreshLoading: false,
        dialogVisible: false,
        tableLoading: false,
        count: 0,
        totalPage: 1,
        currentPage: 1,
        isSearch: false
      }
    },
    components: {
      Pagination
    },
    props: {
      webchatList: {
        type: Number,
        default: function () {
          return 0
        }
      }
    },
    // 监测父级传过来的随机数来刷新列表
    watch: {
      webchatList () {
        this.refresh()
      }
    },
    methods: {
      // 获取列表第一页最新数据
      refresh () {
        this.name = ''
        this.isSearch = true
        if (this.currentPage === 1) {
          this.isSearch = false
        }
        this.refreshLoading = true
        window.setTimeout(() => {
          this.refreshLoading = false
        }, 400)
        this.currentPage = 1
        this.intiTable()
      },
      // 通过关键字搜索网站名称列表
      searchName () {
        this.currentPage = 1
        this.intiTable(this.name)
      },
      // 翻页触发
      turnPage (index) {
        this.currentPage = index
        if (this.isSearch && index < 2) {
          this.isSearch = false
          return
        }
        this.intiTable()
      },
      edit (index, obj) {
        if (index === -1) {
          this.$emit('edit', '')
        } else {
          let data = {
            _id: obj[index]._id
          }
          this.$store.dispatch('queryEcommerceWebchatCfgById', data).then(res => {
            if (res && res.success) {
              this.$emit('edit', res.data)
            }
          })
        }
      },
      // 接入代码触发
      accessCode (webchatUrl, accessId, name) {
        this.$emit('accessCode', webchatUrl, accessId, name)
      },
      testFun (index, data) {
        window.open(data[index].webchatUrl + 'test.html?' + data[index].accessId)
      },
      // test () {
      //   this.$emit('test')
      // },
      dele (id, webname) {
        let text = `确定要删除【${webname}】网站对接么`
        this.$confirm(text, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning',
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn'
        })
          .then(() => {
            this.$store.dispatch('deleteEcommerceWebchatCfg', { _id: id }).then(res => {
              if (res && res.success) {
                this.currentPage = 1
                this.isSearch = true
                this.intiTable()
                this.$message.success(this.$t('config.channel.deleteSuccess'))
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: this.$t('config.agent.cancelDel')
            })
          })
        // this._id = id
        // this.webName = webname
        // this.dialogVisible = true
      },
      // 通过参数判断是否传name
      intiTable (name) {
        this.tableLoading = true
        let data = {
          page: this.currentPage,
          platform: 'web',
          limit: 10,
          name: this.name
        }
        if (typeof name === 'string') {
          this.isSearch = true
          data.name = name
        }
        this.$store.dispatch('queryEcommerceWebchat', data).then(res => {
          if (res && res.success) {
            let webchatUrl = res.webchatUrl || this.$store.state.platform_urls.webchat_https
            res.list.map(item => {
              item.updateTime = item.updateTime ? item.updateTime : item.createTime
              item.webchatUrl = webchatUrl
            })
            this.tableData = res.list
            this.count = res.count
            this.totalPage = Math.ceil(res.count / 10)
            this.tableLoading = false
          }
        })
      }
    },
    beforeMount () {
      this.intiTable()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .merchant-config
    .skill_group
      height calc(100vh - 52px)
  .skill_group
    overflow auto
    .header
      padding 6px 10px
      height 34px
      line-height 34px
      .el-input
        width 170px
      span
        cursor pointer
      .iconfont
        color $c-main
        font-size 12px
        span
          color $cf-gray2
          margin-left 6px
      .el-button
        padding 0
        border none
        margin-left 10px
    .el-table
      .cell
        .el-button:nth-child(4)
          color $c-pink
    .el-dialog
      .dele_text
        text-align center
      .el-dialog__footera
        text-align center

</style>
